const info = {
    name: '华为 手机',
    price: 100,
    desc: '详细的描述信息',
    types: [ '16G', '8G', '4G' ],
    storages: [ '128G', '256G' ],
    colors: [ '远峰蓝', '深空灰', '土豪金' ],
    list: [
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg'
      }
    ]
  }
  

  /* 用面向对象的思想   找一个对象  这个对象实现放大镜的效果   */
  // 使用现成的机器   
  // 自己造机器 

  // 属性  
   //  ele  外围最大的那个div  
   //  mask  遮罩层 
   //  show  展示图片的盒子 
   //  list  底下列表的盒子 
   //  enlarge 放大图片的盒子  
   //  bigimg  放大图片的尺寸 


  //方法 
    // 渲染数据 
    // 列表切换图片
    // 调整比例 让 放大区域到底多大    
    // 鼠标移入移出  
    //  移入 遮罩层显示    放大区域显示 
    //  移出 遮罩层隐藏   放大区域隐藏 
    // 鼠标移动 
        // 遮罩层跟着动  
        // 计算一个比例  放大区域的图片也移动  

class Enlarge{
   constructor(selector){
      this.ele = document.querySelector(selector);
      this.mask =  this.ele.querySelector('.mask');
      this.show =  this.ele.querySelector('.show');
      this.list =  this.ele.querySelector('.list');
      this.enlarge =  this.ele.querySelector('.enlarge');

      this.bindHTML();

      // 获取一些尺寸  
      this.show_width = this.show.clientWidth;
      this.show_height  = this.show.clientHeight;

      // 获取遮罩层的尺寸  
      // 内联外链  window.getComputedStyle(元素).样式名
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height);

      // 超高清实际尺寸  
      this.bg_width =  parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width);
      this.bg_height=parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height);


      this.enlarge_width = 0;
      this.enlarge_height = 0
      this. listChange();
      this.overOut();
      this.setScale();
      this.move();
   }


   // 渲染数据 
  bindHTML(){
      // 创建img标签  
      var imgele = document.createElement('img');

      const show_img = imgele.cloneNode(true);
      // appendChild  insertBefore
      show_img.src = info.list[0].show;
      this.show.insertBefore(show_img,this.mask)


      // enlarge 也需要一个  
      const enlarge_img = imgele.cloneNode(true);
      // appendChild  insertBefore
      enlarge_img.src = info.list[0].enlarge;
      this.enlarge.appendChild(enlarge_img);


      // 列表  
      // info 是总数据 对象 list键对应数组 
      info.list.forEach((item,index)=>{
        // item 是数组的每个元素
          const liele = document.createElement('li');
          const img = imgele.cloneNode(true);
          img.src = item.item;
          liele.appendChild(img);

          // alert(this);
          liele.dataset.show = item.show;// 将中尺寸的链接绑定在 小图的属性data-show 上面
          liele.dataset.enlarge = item.enlarge;// 将大尺寸的链接绑定在 小图的属性data-enlarge 上面

          if(index === 0) liele.classList.add('active');
          this.list.appendChild(liele);
      });

  }


  // 调整比例  
  setScale(){
      // 展示中图的盒子的尺寸 show         超大高清图的尺寸  高清图实际尺寸
      // -------------------   =   --------------------
      //  遮罩层的尺寸   mask             显示高清图盒子的尺寸  enlarge 的尺寸 


      //   显示高清图盒子的尺寸 =  超大高清图的尺寸 *遮罩的尺寸 / 展示中图的盒子的尺寸

      //  4       1
      // --    =  --
      //  8       2

      this.enlarge_width = this.bg_width * this.mask_width  / this.show_width;
      this.enlarge_height = this.bg_height * this.mask_height  / this.show_height;

      console.log(this.enlarge_width);
      console.log(this.enlarge_height);

      // 把上面的结果 赋值给  this.enlarge 的宽和高    
      this.enlarge.style.width = this.enlarge_width+'px';
      this.enlarge.style.height = this.enlarge_height+'px';


  
  
    }

   // 点击切换图片 
  listChange(){
      this.list.addEventListener('click',(e)=>{
           if(e.target.nodeName === 'LI'){
               for(let i=0;i<this.list.children.length;i++){
                this.list.children[i].classList.remove('active');
               }

               e.target.classList.add('active');

               // 中图片 切换  
              //  console.log(e.target.dataset.show);
              this.show.firstElementChild.src = e.target.dataset.show;
               // 大图切换  
              //  console.log(e.target.dataset.enlarge);
               this.enlarge.firstElementChild.src = e.target.dataset.enlarge;
           }
      })
  }

   // 鼠标移入移出
   overOut(){
        this.show.addEventListener('mouseover',()=>{
            this.mask.style.display = 'block';
            this.enlarge.style.display = 'block';

        });
        this.show.addEventListener('mouseout',()=>{

          this.mask.style.display = 'none';
          this.enlarge.style.display = 'none';
        });

   }

   // 鼠标移动事件   

   move(){
    this.show.addEventListener('mousemove',(e)=>{
      // offset  相对于元素本身 左边和上边的距离 

          let x = e.offsetX - this.mask_width / 2;
          let y = e.offsetY - this.mask_height / 2;


          if(x<=0){
            x = 0
          }

          if(y<=0){
            y = 0
          }


          if(x>=this.show_width-this.mask_width){
            x = this.show_width-this.mask_width;
          }

          if(y>=this.show_height-this.mask_height){
            y = this.show_height-this.mask_height;
          }




          this.mask.style.left  = x +'px';
          this.mask.style.top  =  y+ 'px';

          // 上面 实现了  遮罩层 跟随鼠标移动 
          // 防止越界 

          // 在show 上面移动  放大区域 也在高清图上移动  
          // mask 移动的距离                      
          // ------------- ----------      =  ------------
          // enlarge 在高清图上移动的距离         show的尺寸  


          //  enlarge 在高清图上移动的距离 = mask 移动的距离 *  show 的尺寸 / mask尺寸  
          
          this.enlarge.firstElementChild.style.left = -x * this.show_width/ this.mask_width +'px';
          this.enlarge.firstElementChild.style.top = -y * this.show_height/ this.mask_height +'px';


      });
   }
}


